<template>
    <div class="shopcar">
        <header>
            <van-button @click="update">{{text}}</van-button>购物车
        </header>
        <!-- 复选框组 -->
        <van-checkbox-group v-model="result">
            <!-- layout布局 -->
            <van-row v-for="(item,index) in shop" :key="index">
                <!-- 复选框 -->
                <van-col span="2">
                    <van-checkbox :name="item" @click="changeChk"></van-checkbox>
                </van-col>
                <van-col span="22">
                    <!-- 滑块组 -->
                    <van-swipe-cell>
                        <van-card
                            :price="item.price"
                            :title="item.name"
                            :desc="item.type"
                            class="goods-card"
                            :thumb="item.img"
                        >
                            <template #footer>
                                <van-stepper
                                    v-model="item.num"
                                    @change="changeNum(item.num,item.id)"
                                />
                            </template>
                        </van-card>
                        <template #right>
                            <van-button
                                square
                                text="删除"
                                type="danger"
                                class="delete-button"
                                @click="del(item.id)"
                            />
                        </template>
                    </van-swipe-cell>
                </van-col>
            </van-row>
        </van-checkbox-group>
        <!-- 提交订单栏 -->
        <van-submit-bar :price="allPrice*100" :button-text="buttonText" @submit="onSubmit">
            <van-checkbox v-model="checked" @click="changeAll">全选</van-checkbox>
        </van-submit-bar>
        <!-- 空状态显示 -->
        <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="快去添加商品呀"
            v-show="shop.length==[]"
        />
    </div>
</template>

<script>
import Header from "../../components/Header/Header.vue";
export default {
    components: { Header },
    data() {
        return {
            result: [], //复选框数据数组
            checked: false,
            text:'编辑',
            buttonText:'提交订单'
        };
    },
    computed: {
        shop() {
            return this.$store.state.shop;
        },
        allPrice() {
            //计算总价
            let sum = 0;
            this.result.forEach((item) => {
                sum += item.num * item.price;
            });
            return sum;
        },
        delId(){
            return this.result.map(item=>{
                return item.id
            })
        }
    },
    watch:{
        //监听全选框的属性，改变其他复选框和result数组
        checked:{
            handler(newVal){
                if(newVal==true){
                    this.result=this.shop
                    console.log(this.result);
                }else{
                    this.checked=false
                }
            },
            immediate:true
        }
    },
    methods: {
        onSubmit() {
            // console.log(this.result);
        },
        del(id) {
            this.$store.commit("del", id);
        },
        changeNum(num, id) {
            // console.log(val);
            this.$store.commit("changeNum", { num, id });
        },
        changeChk() {
            //全选框变量
            if (this.$store.state.shop.length == this.result.length) {
                this.checked = true;
            } else {
                this.checked = false;
            }
        },
        update() {
            if(this.text=='编辑'){
                this.text='完成';
                this.buttonText='删除'
                this.checked=true
            }else{
                this.text='编辑'
                this.buttonText='提交订单'
                this.checked=false
            }
        },
        changeAll(){
            if(this.checked==false){
                this.result=[]
            }
            
        },
        onSubmit(){
            if(this.buttonText=='删除'){
                this.$store.commit('delChk',this.delId)
            }else{
                
            }
        }
    },
};
</script>

<style lang="scss">
.shopcar {
    width: 100%;
    header {
        width: 60%;
        height: 7vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        button {
            height: 5vh;
        }
    }
    .van-col--2 {
        height: 16vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .delete-button {
        height: 100%;
    }
    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }
    .van-submit-bar{
        bottom: 8vh;
    }
}
</style>